<template>
  <component
    :is="componentType"
    v-model="vModel"
    v-bind="myProps"
    v-on="events"
  />
</template>

<script>
import MyInput4 from './MyInput4.vue'

export default {
  name: 'myControl',
  components: {
    MyInput4,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: [String, Number],
    type: String,
    props: {
      type: Object,
      default: () => ({}),
    },
    events: Object,
  },
  watch: {
    value: {
      immediate: false,
      handler(value) {
        console.log('watch value change:', value)
        this.vModel = value
      },
    },
    vModel: {
      handler(value) {
        this.$emit('change', value)
      },
    },
  },
  data() {
    console.log('this.props', JSON.stringify(this.props))
    console.log('this.vModel is:', this.vModel)

    const { value, ...restProps } = this.props
    return {
      vModel: this.value ?? value,
      myProps: restProps,

      componentType: 'MyInput4',
    }
  },
  methods: {},
}
</script>

<style></style>
